<template>
	<view class="order-container">
		<!-- 搜索栏 -->
		<view class="search-box">
			<view class="search-input">
				<image src="/static/search.png" mode="aspectFit" class="search-icon"></image>
				<input 
					type="text"
					v-model="keyword"
					placeholder="搜索订单号/商品名称"
					@confirm="handleSearch"
					confirm-type="search"
				/>
			</view>
		</view>
		
		<!-- 状态筛选 -->
		<scroll-view scroll-x class="filter-scroll" :scroll-left="0">
			<view class="filter-list">
				<view 
					class="filter-item" 
					:class="{'active': currentType === type.value}"
					v-for="(type, index) in orderTypes" 
					:key="index"
					@click="handleFilter(type.value)"
				>
					{{type.label}}
				</view>
			</view>
		</scroll-view>
		
		<!-- 订单列表 -->
		<scroll-view 
			scroll-y 
			class="order-list"
			@scrolltolower="handleLoadMore"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="list-wrapper">
				<!-- 无数据展示 -->
				<view v-if="orderList.length === 0 && !loading" class="empty-box">
					<image src="/static/empty.png" mode="aspectFit" class="empty-icon"></image>
					<text class="empty-text">暂无订单记录</text>
				</view>
				
				<!-- 订单列表 -->
				<template v-else>
					<view class="order-item" v-for="(item, index) in orderList" :key="index">
						<view class="order-header">
							<view class="order-no-wrap">
								<text class="order-no">订单号：{{item.order_no}}{{item.parent_order_no>0?`(${item.parent_order_no})`:''}}
								</text>
								<view class="copy-btn" @click.stop="handleCopy(item.order_no)">
									<image src="/static/copy.png" mode="aspectFit" class="copy-icon"></image>
								</view>
							</view>
							<text class="order-status" :class="getStatusClass(item.order_type)">{{item.user_status_string}}</text>
						</view>
						
						<view class="order-content">
							<image :src="item.image_url || 'static/sku-default.png'" mode="aspectFill" class="goods-image"></image>
							<view class="goods-info">
								<text class="goods-name">{{item.sku_name}}</text>
								<view class="goods-detail">
									<text class="goods-num">x{{item.sku_num}}</text>
									<view v-if="item.order_type !== 'invalid'" class="subsidy-info">
										<text class="subsidy-label">{{item.order_type === 'settled' ? '' : '预估'}}补贴：</text>
										<text class="subsidy-value">￥{{item.user_amount}}</text>
									</view>
									<view v-else class="subsidy-info">
										<text class="subsidy-value-no">￥{{item.user_amount}}</text>
									</view>
								</view>
							</view>
						</view>
						
						<view class="order-footer">
							<view class="time-info">
								<text>下单时间：{{item.order_time}}</text>
								<text v-if="item.finish_time">完成时间：{{item.finish_time}}</text>
								<text v-if="item.system_settlement_at">补贴时间：{{item.system_settlement_at}}</text>
							</view>
						</view>
					</view>
					
					<!-- 加载状态 -->
					<view class="loading-more" v-if="loading">
						<view class="loading-icon"></view>
						<text class="loading-text">加载中...</text>
					</view>
					
					<!-- 无更多数据 -->
					<view v-if="!hasMore && orderList.length > 0" class="no-more">
						<text class="no-more-text">没有更多数据了</text>
					</view>
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import request from '@/utils/request'

export default {
	data() {
		return {
			orderList: [],
			page: 1,
			hasMore: true,
			loading: false,
			isRefreshing: false,
			keyword: '',
			currentType: '',
			orderTypes: [
				{ label: '全部', value: '' },
				{ label: '待付款', value: 'unpaid' },
				{ label: '已付款', value: 'paid' },
				{ label: '待补贴', value: 'waiting_settlement' },
				{ label: '已补贴', value: 'settled' },
				{ label: '无效', value: 'invalid' }
			]
		}
	},
	onLoad(options) {
		// 接收地址栏参数
		if (options.keyword) {
			this.keyword = decodeURIComponent(options.keyword)
			// 自动触发搜索
			this.handleSearch()
		}
        if (options.currentType) {
            this.currentType = options.currentType
            // 自动触发搜索
            this.handleSearch()
        }
	},
	onShow() {
		if (!this.keyword) { // 只有在没有搜索关键词时才自动加载
			this.getOrderList()
		}
	},
	methods: {
		// 获取订单列表
		async getOrderList() {
			if (this.loading) return
			this.loading = true
			
			try {
				const res = await request({
					url: '/wechat/order/jdOrders',
					data: { 
						page: this.page,
						keyword: this.keyword,
						orderType: this.currentType
					}
				})
				
				if (res.code === 0 && res.data) {
					if (this.page === 1) {
						this.orderList = res.data.data
					} else {
						this.orderList = [...this.orderList, ...res.data.data]
					}
					this.hasMore = !!res.data.next_page_url
				}
			} catch (err) {
				console.error('获取订单列表失败', err)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
				if (this.isRefreshing) {
					uni.stopPullDownRefresh()
					this.isRefreshing = false
				}
			}
		},
		
		// 处理搜索
		handleSearch() {
			this.page = 1
			this.orderList = []
			this.hasMore = true
			this.getOrderList()
		},
		
		// 处理筛选
		handleFilter(type) {
			this.currentType = type
			this.page = 1
			this.orderList = []
			this.hasMore = true
			this.getOrderList()
		},
		
		// 下拉刷新
		onRefresh() {
			this.isRefreshing = true
			this.page = 1
			this.orderList = []
			this.hasMore = true
			this.getOrderList()
		},
		
		// 上拉加载更多
		handleLoadMore() {
			if (this.hasMore && !this.loading) {
				this.page++
				this.getOrderList()
			}
		},
		
		// 获取状态样式类
		getStatusClass(orderType) {
			const statusMap = {
				'unpaid': 'status-unpaid',           // 待付款
				'paid': 'status-paid',               // 已付款
				'waiting_settlement': 'status-waiting', // 待补贴
				'settled': 'status-settled',         // 已补贴
				'invalid': 'status-invalid'          // 无效
			}
			return statusMap[orderType] || ''
		},
		
		// 处理复制订单号
		handleCopy(orderNo) {
			uni.setClipboardData({
				data: orderNo,
				success: () => {
					uni.showToast({
						title: '订单号已复制',
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style>
.order-container {
	min-height: 100vh;
	background-color: #f6f7fb;
	padding-top: var(--status-bar-height);
}

.search-box {
	position: fixed;
	top: var(--status-bar-height);
	left: 0;
	right: 0;
	padding: 20rpx;
	background: #fff;
	z-index: 99;
	height: 96rpx;
	box-sizing: border-box;
}

.search-input {
	display: flex;
	align-items: center;
	background: #f5f5f5;
	border-radius: 8rpx;
	padding: 16rpx 24rpx;
}

.search-icon {
	width: 28rpx;
	height: 28rpx;
	margin-right: 12rpx;
	opacity: 0.5;
}

.search-input input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.search-input input::placeholder {
	color: #999;
}

.filter-scroll {
	position: fixed;
	top: calc(var(--status-bar-height) + 96rpx);
	left: 0;
	right: 0;
	background: #fff;
	z-index: 98;
	white-space: nowrap;
	border-bottom: 1rpx solid #f5f5f5;
	height: 88rpx;
	box-sizing: border-box;
}

.filter-list {
	display: flex;
	padding: 0 12rpx;
}

.filter-item {
	padding: 20rpx 24rpx;
	font-size: 28rpx;
	color: #666;
	position: relative;
}

.filter-item.active {
	color: #007AFF;
	font-weight: 500;
}

.filter-item.active::after {
	content: '';
	position: absolute;
	left: 24rpx;
	right: 24rpx;
	bottom: 0;
	height: 4rpx;
	background: #007AFF;
	border-radius: 2rpx;
}

.order-list {
	height: 100vh;
	padding-top: calc(var(--status-bar-height) + 184rpx); /* 96rpx + 88rpx */
	box-sizing: border-box;
}

.list-wrapper {
	padding: 20rpx;
	padding-bottom: env(safe-area-inset-bottom); /* 适配底部安全区域 */
}

.empty-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx 0;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.order-item {
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	padding: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.03);
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.order-no-wrap {
	display: flex;
	align-items: center;
}

.order-no {
	font-size: 26rpx;
	color: #666;
}

.order-status {
	font-size: 26rpx;
	font-weight: 500;
}

/* 状态颜色 */
.status-invalid {
	color: #999999; /* 灰色 - 无效 */
}

.status-unpaid {
	color: #eebe11; /* 黄色 - 待付款 */
}

.status-paid {
	color: #1571d3; /* 蓝色 - 已付款 */
}

.status-waiting {
	color: #ff9900; /* 橙色 - 待补贴 */
}

.status-settled {
	color: #07c160; /* 绿色 - 已补贴 */
}

.order-content {
	display: flex;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.goods-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.goods-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.goods-name {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.goods-detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12rpx;
}

.goods-num {
	font-size: 26rpx;
	color: #999;
}

.order-footer {
	padding-top: 20rpx;
}

.time-info {
	display: flex;
	flex-direction: column;
	font-size: 24rpx;
	color: #999;
	margin-bottom: 12rpx;
}

.time-info text {
	margin-bottom: 8rpx;
}

.subsidy-info {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.subsidy-label {
	font-size: 26rpx;
	color: #666;
}

.subsidy-value {
	font-size: 32rpx;
	color: #ff4d4f;
	font-weight: bold;
}

.subsidy-value-no {
    font-size: 32rpx;
    color: #cccccc;
    font-weight: bold;
    text-decoration: line-through;
}

.loading-more {
	text-align: center;
	padding: 30rpx;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
}

.loading-icon {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	border: 4rpx solid #ddd;
	border-top-color: #007AFF;
	margin-right: 10rpx;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-text {
	color: #666;
}

.no-more {
	text-align: center;
	padding: 30rpx;
	color: #999;
	font-size: 24rpx;
}

.copy-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8rpx;
	margin-left: 12rpx;
}

.copy-icon {
	width: 28rpx;
	height: 28rpx;
	opacity: 0.6;
}
</style>
